<template>
    <div class="unit-business">

        <div class="business-content">
            <template v-if="tableData && tableData.length > 0">
                <div class="items" v-for="(item , ind) in tableData" :key="ind">
                    <content-item :data="item">
                        <span slot="time"></span>

                        <template slot="content">

                            <div class="item-info">
                                <div class="title">
                                    <a :href="`/portraits?guid=${item.guid}&company=${item.searchname}`" target="_bank">{{`${ind+1}.${item.searchname}`}}</a>
                                    <el-tag v-if="!!item.regstatus" size="mini"
                                        :type="item.regstatus == '正常' ? 'success' : 'primary'">{{item.regstatus}}</el-tag>
                                </div>

                                <div class="info-row">
                                    <div class="col1">
                                        <el-link type="info" :underline="false">法定代表人：{{item.legalpersonname || '-'}}</el-link>
                                    </div>
                                    <div class="col2">
                                        <el-link type="info" :underline="false">
                                            注册资本：{{item.regcapital || '-'}}<span v-show="!!item.regcapital">{{item.regcapitalunit}}</span>
                                        </el-link>
                                    </div>
                                    <div class="col3">
                                        <el-link type="info" :underline="false">成立日期：{{item.estiblishtime || '-'}}</el-link>
                                    </div>
                                </div>
                            </div>
                        </template>

                        <!-- <template slot="tag">
                            <el-tag v-if="!!item.regstatus" size="mini" :type="item.regstatus == '正常' ? 'success' : 'primary'">{{item.regstatus}}</el-tag>
                        </template> -->
                    </content-item>
                </div>
            </template>

            <div class="empty" v-if="!tableData.length">
                <span>暂无数据</span>
            </div>
            <!-- <empty-list v-if="!tableData.length" :margin="5">
                <span>暂无数据</span>
            </empty-list> -->
        </div>

        <my-pagination class="pagination" ref="page" v-model="tableData" :action="`${$store.state.api.tbUrl}/searchrelated/qylist.json`" :search="pgData"
            :auto-show="false" :afterQuery="noticeListAfterQuery" layout="prev, pager,next"></my-pagination>
    </div>
</template>

<script>
import contentItem from './item.vue';
import EmptyList from '@components/sys/empty-list';
import { mapGetters, mapActions } from 'vuex';

export default {
    props: {
        searchObj: {
            type: Object,
            default: () => {
                return {
                    area: '',
                    dwType: '',
                    title: '',
                };
            },
        },
        showASearch: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        contentItem,
        EmptyList,
    },
    data() {
        return {
            tableData: [],
            cityListByProvinceSel: null,

            provinceIds: [],

            noticeList: [],
        };
    },
    computed: {
        pgData: function () {
            console.log(this.searchObj);
            return {
                // sortname: 'publishtime',
                pagesize: 6,
                company: this.searchObj.title,
                city: this.searchObj.area ? this.searchObj.area[this.searchObj.area.length - 1] : '',
                dwtype: this.searchObj.dwType,
            };
        },
    },
    watch: {
        'pgData.city': function (n, o) {
            this.deSearch();
        },
        'pgData.dwtype': {
            handler(n, o) {
                this.deSearch();
            },
            deep: true,
        },
    },
    methods: {
        deSearch: function () {
            this.$nextTick(() => {
                this.$refs.page.queryData();
            });
        },
        reload: function () {
            this.$refs.page.reload();
        },

        noticeListAfterQuery(rows, data) {
            // this.setCzc(['首页', '翻页' , '查公告', this.$refs.page.currentPage ,'home-page-noticeLookup'])
        },
    },
    mounted() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.unit-business {
    width: 810px;
    margin: 0 auto;

    .business-content {
        border: 1px solid #e7e7e7;
        margin-top: 12px;
        height: 212px;
        .items {
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
            // & + .items {
            //     border-top: 1px solid #e7e7e7;
            // }
            &:not(:last-child) {//不是最后一个
				border-bottom: 1px solid #e7e7e7;
			}
            &:first-child {
				border-bottom: 1px solid #e7e7e7;
			}
        }
    }
    .pagination {
        margin-top: 10px;
    }

    .empty {
        height: 212px;
        text-align: center;
        padding-top: 80px;
        color: #bbb;
        font-weight: bold;
    }

    .content-out {
        margin: 0 10px 0 15px;
        .my-tag {
            margin-right: 0px !important;
        }
    }
    .item-info {
        width: 810px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        font-size: 12px;

        .title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            a {
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 290px;
                margin-right: 10px;
                color: #272727;
                font-weight: 600;
                &:hover {
                    color: $primaryColor;
                }
            }
        }

        .info-row {
            // flex: 1;
            width: 450px;
            display: flex;
            font-size: 12px;
            justify-content: space-between;

            .col1 {
                width: 120px;
            }
            .col2 {
                width: 180px;
            }
            .col3 {
                width: 135px;
            }
            // & div {
            //    border: 1px solid;
            // }

            & + .info-row {
                margin-top: 4px;
            }

            .el-link {
                font-size: 12px;
            }
        }
    }
}
</style>